<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col :span="6">
        <div class="card card1" style="background:#eff7ff">
          <div class="header" style="border-bottom-color:#cee2f6;">
            <div class="header-text">审查逮捕</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <div class="tabs">
              <div class="item" :class="{active:card1Active==='prevMonth'}" @click="handleTab('card1Active','prevMonth')">上月</div>
              <div class="item" :class="{active:card1Active==='month'}" @click="handleTab('card1Active','month')">本月</div>
              <div class="item" :class="{active:card1Active==='year'}" @click="handleTab('card1Active','year')">本年</div>
            </div>
            <div class="content">
              <div class="left">
                <div class="img">
                  <img src="@/assets/images/home/card1.png">
                </div>
                <div class="cont">
                  <div class="value" style="color:#5781ce">150件</div>
                  <div class="text">案件总数</div>
                </div>
              </div>
              <div class="right" style=" width: 55%;">
                <div class="item bgj">
                  <div class="item_one flex">
                    <div>
                      <img src="@/assets/images/home/icon4.png" alt="">
                      <span>批捕案件</span>
                    </div>
                    <div class="value">50<span>件</span></div>
                  </div>
                  <div class="item_one flex">
                    <div>
                      <img src="@/assets/images/home/icon3.png" alt="">
                      <span>涉案人数</span>
                    </div>
                    <div class="value">105<span>人</span></div>
                  </div>
                </div>
                <!-- <div class="item flex align-center">
                  <img src="@/assets/images/home/page1.png" alt="">
                  <div class="value1 ml-10">
                    <div class="v fs-15" style="color:#5781ce;font-weight:600">50件/105人</div>
                    <div class="mt-10">批捕案件</div>
                  </div>
                </div> -->
                <!-- <div class="item">
                  <div class="value">
                    <div class="v" style="color:#5781ce">45</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#5781ce" define-back-color="#cee2f6" :percentage="8" />
                  </div>
                  <div class="text">进行中</div>
                </div>
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#5781ce">105</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#5781ce" define-back-color="#cee2f6" :percentage="80" />
                  </div>
                  <div class="text">已归档</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card2" style="background:#effaff">
          <div class="header" style="border-bottom-color:#c8e7f5;">
            <div class="header-text">审查起诉</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <div class="tabs">
              <div class="item" :class="{active:card2Active==='prevMonth'}" @click="handleTab('card2Active','prevMonth')">上月</div>
              <div class="item" :class="{active:card2Active==='month'}" @click="handleTab('card2Active','month')">本月</div>
              <div class="item" :class="{active:card2Active==='year'}" @click="handleTab('card2Active','year')">本年</div>
            </div>
            <div class="content">
              <div class="left">
                <div class="img">
                  <img src="@/assets/images/home/card2.png">
                </div>
                <div class="cont">
                  <div class="value" style="color:#57aaeb">224件</div>
                  <div class="text">案件总数</div>
                </div>
              </div>
              <div class="right" style=" width: 55%;">
                <div class="item bgj">
                  <div class="item_one">
                    <div>
                      <img src="@/assets/images/home/icon2.png" alt="">
                      <span>起诉案件</span>
                    </div>
                    <div class="value">64<span>件</span></div>
                  </div>
                  <div class="item_one">
                    <div>
                      <img src="@/assets/images/home/icon1.png" alt="">
                      <span>涉案人数</span>
                    </div>
                    <div class="value">160<span>人</span></div>
                  </div>
                </div>
                <!-- <div class="item flex align-center">
                  <img src="@/assets/images/home/page1.png" alt="">
                  <div class="value1 ml-10">
                    <div class="v fs-15" style="color:#5781ce;font-weight:600">64件/160人</div>
                    <div class="mt-10">起诉案件</div>
                  </div>
                </div> -->
                <!-- <div class="item">
                  <div class="value">
                    <div class="v" style="color:#57aaeb">102</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#57aaeb" define-back-color="#cee2f6" :percentage="8" />
                  </div>
                  <div class="text">进行中</div>
                </div>
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#57aaeb">122</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#57aaeb" define-back-color="#cee2f6" :percentage="8" />
                  </div>
                  <div class="text">已归档</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card3" style="background:#fdf9f6">
          <div class="header" style="border-bottom-color:#fbe9dc">
            <div class="header-text">评查结果</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <div class="tabs">
              <div class="item" :class="{active:card3Active==='prevMonth'}" @click="handleTab('card3Active','prevMonth')">上月</div>
              <div class="item" :class="{active:card3Active==='month'}" @click="handleTab('card3Active','month')">本月</div>
              <div class="item" :class="{active:card3Active==='year'}" @click="handleTab('card3Active','year')">本年</div>
            </div>
            <div class="content">
              <div class="left">
                <div class="img">
                  <img src="@/assets/images/home/card3.png">
                </div>
                <div class="cont">
                  <div class="value" style="color:#ed9e65">227件</div>
                  <div class="text">评查总数</div>
                </div>
              </div>
              <div class="right">
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#ed9e65">209件</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#ed9e65" define-back-color="#fbe9dc" :percentage="8" />
                  </div>
                  <div class="text">A级数</div>
                </div>
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#ed9e65">17件</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#ed9e65" define-back-color="#fbe9dc" :percentage="8" />
                  </div>
                  <div class="text">B级数</div>
                </div>
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#ed9e65">1件</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#ed9e65" define-back-color="#fbe9dc" :percentage="8" />
                  </div>
                  <div class="text">C级数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card4" style="background:#f6fcfa">
          <div class="header" style="border-bottom-color:#d3ebe2">
            <div class="header-text">案件分析</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <div class="tabs">
              <div class="item" :class="{active:card4Active==='prevMonth'}" @click="handleTab('card4Active','prevMonth')">上月</div>
              <div class="item" :class="{active:card4Active==='month'}" @click="handleTab('card4Active','month')">本月</div>
              <div class="item" :class="{active:card4Active==='year'}" @click="handleTab('card4Active','year')">本年</div>
            </div>
            <div class="content">
              <div class="left">
                <div class="img">
                  <img src="@/assets/images/home/card4.png">
                </div>
                <div class="cont">
                  <div class="value" style="color:#7ec2a7">374件</div>
                  <div class="text">案件总数</div>
                </div>
              </div>
              <div class="right">
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#7ec2a7">40.1%</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#7ec2a7" define-back-color="#d3ebe2" :percentage="8" />
                  </div>
                  <div class="text">审查逮捕占比</div>
                </div>
                <div class="item">
                  <div class="value">
                    <div class="v" style="color:#7ec2a7">59.9%</div>
                    <el-progress :stroke-width="4" type="circle" :width="55" :show-text="false" color="#7ec2a7" define-back-color="#d3ebe2" :percentage="8" />
                  </div>
                  <div class="text">审查起诉占比</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="row2" :gutter="15" style="margin-top:15px;">
      <el-col :span="18" style="height:100%">
        <div class="card" style="height:100%;">
          <div class="header">
            <div class="header-text">待办事项</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <el-table :data="tableData1" height="100%" size="small">
              <el-table-column align="left" prop="ajmc" label="案件名称" min-width="200" show-overflow-tooltip />
              <el-table-column align="center" prop="sah" width="180" label="受案号" />
              <el-table-column align="center" prop="ajlb" label="案件类型" width="80" />
              <el-table-column align="center" prop="lasj" label="立案时间" width="100" />
              <el-table-column align="center" prop="ysjg" label="移送机关" min-width="120" show-overflow-tooltip />
              <el-table-column align="center" prop="ajyjrq" label="案卷移交日期" width="100" />
              <!-- <el-table-column align="center" prop="lzzt" label="案件流转状态" width="100" /> -->
              <el-table-column align="center" prop="spqx" label="审批期限" min-width="100" />
              <el-table-column align="center" prop="cjsj" label="创建时间" width="120" />
              <el-table-column label="操作" fixed="right" align="center" width="60px">
                <template slot-scope="scope">
                  <el-link type="primary" size="small" @click="handleClick(scope.row)">处理</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="height:100%">
        <div class="card" style="height:100%">
          <div class="header">
            <div class="header-text">检察官公诉案件数</div>
          </div>
          <div class="body">
            <div ref="chart11" class="chart" style="height:100%" />
          </div>

        </div>
      </el-col>
    </el-row>
    <el-row class="row3" :gutter="15" style="margin-top:15px;">
      <el-col :span="18" style="height:100%">
        <div class="card" style="height:100%">
          <div class="header">
            <div class="header-text">案件进展</div>
            <div class="action">
              <i class="el-icon-refresh" />
            </div>
          </div>
          <div class="body">
            <el-table :data="tableData2" height="100%" size="small">
              <el-table-column align="left" prop="ajmc" label="案件名称" min-width="200" show-overflow-tooltip />
              <el-table-column align="center" prop="sah" width="180" label="受案号" />
              <el-table-column align="center" prop="ajlb" label="案件类型" />
              <el-table-column align="center" prop="lasj" label="立案时间" />
              <el-table-column align="center" prop="ysjg" label="移送机关" show-overflow-tooltip />
              <el-table-column align="center" prop="ajyjrq" width="100" label="案卷移交日期" />
              <el-table-column align="center" prop="lzzt" width="100" label="案件流转状态" />
              <el-table-column align="center" prop="spqx" label="审批期限" min-width="100" />
              <el-table-column align="center" prop="cjsj" label="创建时间" width="120" />
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="height:100%">
        <div class="card" style="height:100%">
          <div class="header">
            <div class="header-text">典型案例</div>
            <div class="action">
              <!-- <i class="el-icon-refresh" /> -->
            </div>
          </div>
          <div class="body">
            <!-- <div class="page-list" style="height:100%;">
              <div v-for="(item,index) in pageList" :key="index" class="page-item" @click="gotoPage(item.url)">
                <div class="img">
                  <img :src="item.img">
                </div>
                <div class="cont">
                  <div class="text">{{ item.text }}</div>
                  <div class="go">立即前往 <i class="el-icon-arrow-right" /></div>
                </div>
              </div>
            </div> -->
            <el-table ref="table3" :show-header="false" :data="tableData3" height="100%" size="small">
              <el-table-column prop="title" align="left" label="案件名称" />
              <!-- <el-table-column prop="createTime" align="center" label="立案时间" />
              <el-table-column prop="stage" align="center" label="当前环节" /> -->
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      title="办理"
      :visible.sync="drawerOpen"
      append-to-body
      size="900px"
      custom-class="dv_drawer"
    >
      <formDetail ref="formBox" :type="'add'" :show-flag="false" />
      <div class="drawer-footer">
        <el-button @click="drawerOpen=false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
const color = ['#3e67a5', '#c45e3a', '#bd7f36']
import * as echarts from 'echarts'
import formDetail from '@/views/caseEntry/arrest/form.vue'
export default {
  name: 'Index',
  components: { formDetail },
  data() {
    return {
      // 版本号
      version: '3.8.8',
      accept: 'month', // 接受情况
      card1Active: 'month',
      card2Active: 'month',
      card3Active: 'month',
      card4Active: 'month',
      pageList: [
        { text: '审查逮捕', img: require('@/assets/images/home/page1.png'), url: '/caseEntry/arrest' },
        { text: '审查起诉', img: require('@/assets/images/home/page2.png'), url: '/caseEntry/prosecute' },
        { text: '问题案件', img: require('@/assets/images/home/page3.png'), url: '/caseInquiry/problemCase' },
        { text: '评查指标', img: require('@/assets/images/home/page4.png'), url: '/qualityAssessment/indicator' },
        { text: '风险案件', img: require('@/assets/images/home/page5.png'), url: '/caseInquiry/riskCase' },
        { text: '考核结果', img: require('@/assets/images/home/page6.png'), url: '/performance/assessmentResult' }
      ],
      tableData1: [
        {
          ajmc: '张某涉嫌组织、领导黑社会性质组织罪审查逮捕案‌',
          sah: '（2025）豫0108刑捕0001号',
          ajlb: '审查逮捕',
          ysjg: '郑州市公安局惠济分区',
          lasj: '2025-03-23',
          ajyjrq: '2025-03-24',
          lzzt: '继续侦查',
          spqx: '12小时10分钟',
          cjsj: '2025-03-25',
          status: 2,
          gajgForm: {
            ajmc: '张某涉嫌组织、领导黑社会性质组织罪审查起诉案‌',
            sah: '（2025）豫0301刑诉0001号',
            xyrmc: '张某',
            rs: '20',
            lasj: '2025-03-23',
            ay: '涉嫌组织、领导黑社会性质组织罪审查',
            qzcs: '2025-03-24',
            zcjg: '惠济区检察院',
            fzshr: '李某',
            fjrd: ''
          }
        }, {
          ajmc: '‌未成年人孙某涉嫌强奸罪审查逮捕案‌‌',
          sah: '（2025）豫0108刑捕0031号',
          ajlb: '审查逮捕',
          ysjg: '郑州市公安局惠济分区',
          lasj: '2025-03-22',
          ajyjrq: '2025-03-23',
          lzzt: '继续侦查',
          spqx: '3小时10分钟',
          cjsj: '2025-03-24',
          status: 3,
          gajgForm: {
            ajmc: '‌未成年人孙某涉嫌强奸罪审查逮捕案‌‌',
            sah: '（2025）豫0108刑捕0031号',
            xyrmc: '孙某',
            rs: '4',
            lasj: '2025-03-22',
            ay: '涉嫌故意杀人罪',
            qzcs: '2025-03-23',
            zcjg: '惠济区检察院',
            fzshr: '李某',
            fjrd: ''
          },
          form1: {
            c1: '1',
            c2: '1',
            c3: '',
            c4: '',
            c5: '1',
            c6: '',
            c7: '1',
            c8: ''
          }
        },
        {
          ajmc: '李某（累犯）涉嫌抢劫罪审查起诉案‌‌',
          sah: '（2025）豫0108刑诉0011号',
          ajlb: '审查起诉',
          ysjg: '郑州市公安局惠济分区',
          lasj: '2025-03-21',
          ajyjrq: '2025-03-22',
          lzzt: '审查起诉',
          spqx: '10小时05分钟',
          cjsj: '2025-03-23',
          status: 4,
          gajgForm: {
            ajmc: '李某（累犯）涉嫌抢劫罪审查起诉案‌‌',
            sah: '（2025）豫0108刑诉0011号',
            xyrmc: '李某',
            rs: '4',
            lasj: '2025-03-21',
            ay: '涉嫌抢劫罪',
            qzcs: '2025-03-22',
            zcjg: '惠济区检察院',
            fzshr: '李某',
            fjrd: ''
          },
          form1: {
            c1: '1',
            c2: '1',
            c3: '',
            c4: '',
            c5: '1',
            c6: '',
            c7: '1',
            c8: ''
          },
          form2: {
            c1: '移送涉案财物情况',
            c2: '2025-02-21',
            c3: '强制措施',
            c4: '文书质量',
            c5: '管辖',
            c6: '',
            c7: 'A级',
            c8: ''
          }
        }, {
          ajmc: '‌周某涉嫌贩卖毒品罪审查逮捕案',
          sah: '（2025）豫0108刑捕0002号',
          ajlb: '审查逮捕',
          ysjg: '郑州市公安局惠济分区',
          lasj: '2025-03-19',
          ajyjrq: '2025-03-20',
          lzzt: '继续侦查',
          spqx: '20小时12分钟',
          cjsj: '2025-03-21',
          status: 2,
          gajgForm: {
            ajmc: '‌周某涉嫌贩卖毒品罪审查逮捕案',
            sah: '（2025）豫0108刑捕0001号',
            xyrmc: '张某',
            rs: '20',
            lasj: '2025-03-19',
            ay: '涉嫌贩卖毒品罪',
            qzcs: '2025-03-20',
            zcjg: '惠济区检察院',
            fzshr: '李某',
            fjrd: ''
          }
        }
      ],
      tableData2: [{
        ajmc: '‌徐某涉嫌非法吸收公众存款罪（单位犯罪）审查起诉案',
        sah: '（2025）豫0108刑诉0038号',
        ajlb: '审查起诉',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-23',
        ajyjrq: '2025-03-24',
        lzzt: '移送审查起诉',
        spqx: '12小时11分钟',
        cjsj: '2025-03-24',
        status: 1
      }, {
        ajmc: '‌未成年人孙某涉嫌强奸罪审查起诉案‌‌',
        sah: '（2025）豫0108刑诉0031号',
        ajlb: '审查起诉',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-22',
        ajyjrq: '2025-03-23',
        lzzt: '继续侦查',
        spqx: '3小时10分钟',
        cjsj: '2025-03-24',
        status: 1
      }, {
        ajmc: '李某（累犯）涉嫌抢劫罪审查起诉案‌‌',
        sah: '（2025）豫0108刑诉0011号',
        ajlb: '审查起诉',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-21',
        ajyjrq: '2025-03-22',
        lzzt: '审查起诉',
        spqx: '10小时05分钟',
        cjsj: '2025-03-23',
        status: 1
      }, {
        ajmc: '‌赵某涉嫌故意杀人罪审查起诉案‌',
        sah: '（2025）豫0108刑诉0024号',
        ajlb: '审查起诉',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-19',
        ajyjrq: '2025-03-20',
        lzzt: '移送审查起诉',
        spqx: '5小时05分钟',
        cjsj: '2025-03-21',
        status: 1
      }, {
        ajmc: '‌周某、吴某涉嫌故意杀人罪、毁灭证据罪审查起诉案',
        sah: '（2025）豫0108刑诉0041号',
        ajlb: '审查起诉',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-19',
        ajyjrq: '2025-03-20',
        lzzt: '移送审查起诉',
        spqx: '2小时10分钟',
        cjsj: '2025-03-21',
        status: 1
      }, {
        ajmc: '王某涉嫌故意伤害罪审查逮捕案‌',
        sah: '（2025）豫0108刑捕0012号',
        ajlb: '审查逮捕',
        ysjg: '郑州市公安局惠济分区',
        lasj: '2025-03-01',
        ajyjrq: '2025-03-02',
        lzzt: '继续侦查',
        spqx: '22小时54分钟',
        cjsj: '2025-03-03',
        status: 1
      }],
      tableData3: [
        { title: '陈某涉嫌职务侵占罪审查逮捕案‌' },
        { title: '‌赵某涉嫌组织、领导黑社会性质组织罪审查起诉案‌' },
        { title: '‌周某涉嫌贩卖毒品罪审查逮捕案‌' },
        { title: '杨某涉嫌以危险方法危害公共安全罪审查起诉案‌' },
        { title: '‌赵某涉嫌故意杀人罪审查逮捕案‌' },
        { title: '徐某涉嫌非法吸收公众存款罪（单位犯罪）审查起诉案' },
        { title: '未成年人孙某涉嫌强奸罪审查起诉案‌' },
        { title: '‌张某涉嫌盗窃罪、掩饰隐瞒犯罪所得罪审查起诉案‌' }
      ],
      chart1Option: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '40px',
          right: '20px',
          left: '40px',
          bottom: '40px'
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '赵检',
              '李检',
              '王检',
              '周检',
              '张检',
              '苏检',
              '钱检'
            ],
            axisLine: {
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              margin: 10,
              color: '#333',
              textStyle: {
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: '{value}',
              color: '#333'
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [80, 80, 97, 53, 95, 26, 72],
            barWidth: '20px',
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = color.length
                  return color[params.dataIndex % num]
                }
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                  color: '#333',
                  fontSize: 14
                }
              }
            }
          }
        ]
      },
      chart1: {},
      drawerOpen: false
    }
  },
  mounted() {
    this.autoScrollFn()
    this.$nextTick(() => {
      this.chart1 = echarts.init(this.$refs.chart11)
      this.chart1.setOption(this.chart1Option)
    })
  },
  methods: {
    gotoPage(url) {
      this.$router.push(url)
    },
    handleTab(key, value) {
      this[key] = value
    },
    autoScrollFn() {
      clearInterval(this.scrollTimer)
      this.$nextTick(() => {
        const tBody =
          this.$refs.table3.$refs.bodyWrapper
        // 当可视窗口高度大于表格高度时，不滚动
        if (tBody.clientHeight > tBody.scrollHeight) {
          return
        }
        // if (this.scrollInitFlag) {
        //   tBody.scrollTop = 0
        //   this.scrollInitFlag = false
        // }
        this.scrollTimer = setInterval(() => {
          tBody.scrollTop += 1 // 每次上滑一个像素
          // 当滚动到最底部(可视高度+距离顶部=整个高度)时，从头开始滚
          if (tBody.clientHeight + tBody.scrollTop === tBody.scrollHeight) {
            tBody.scrollTop = 0
          }
        }, (1000 / 60) * 3) // 1000 / 60
      })
    },

    stopScrollFn() {
      clearInterval(this.scrollTimer)
      this.scrollTimer = null
    },
    handleClick(rowData) {
      this.drawerOpen = true
      this.$nextTick(() => {
        this.$refs.formBox.init(rowData, 'add')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display:flex;
  flex-direction: column;
  height:100%;
  box-sizing: border-box;
  .row2 {
    flex:1;
    overflow:hidden;
  }
  .row3 {
    flex:1;
    overflow:hidden;
  }
}
.card {
  display:flex;
  flex-direction: column;
  background:#fff;
  color:#333;
  white-space: nowrap;
  .header {
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:0 15px;
    height:40px;
    border-bottom:2px solid #eaeaea;
    position:relative;
    &::before {
      content:'';
      position: absolute;
      left:4px;
      top:50%;
      width:2px;
      background:#042c76;
      height:12px;
      transform:translateY(-50%);
      border-radius:4px;
    }
    .header-text {
      color:#333;
      font-weight:bold;
      font-size:15px;
    }
    .el-icon-refresh {
      cursor:pointer;
    }
  }
  &.card1 {
    .header::before {
      background:#5781ce;
    }
    .item.active {
      color:#5781ce
    }
  }
  &.card2 {
    .header::before {
      background:#57aaeb;
    }
    .item.active {
      color:#57aaeb
    }
    .bgj{
      background: linear-gradient(
            90deg,
            rgba(87, 170, 235, 0.2),
            transparent
          ) !important;
      .value{
        color: #57aaeb;
      }
    }
  }
  &.card3 {
    .header::before {
      background:#ed9e65;
    }
    .item.active {
      color:#ed9e65
    }
  }
  &.card4 {
    .header::before {
      background:#7ec2a7;
    }
    .item.active {
      color:#7ec2a7
    }
  }
  .body {
    flex:1;
    overflow:hidden;
    .tabs {
      display:flex;
      align-items: center;
      justify-content: flex-end;
      padding-right:20px;
      padding-top:10px;
      .item {
        margin-left:20px;
        cursor:pointer;
        &.active {
          &.card1 {
            color:#5781ce;
          }
          &.card2 {
            color:#57aaeb;
          }
          &.card3 {
            color:#ed9e65;
          }
          &.card4 {
            color:#7ec2a7;
          }
        }
      }
    }
    .content {
      flex:1;
      display:flex;
      align-items: center;
      justify-content: space-between;
      padding:15px;
      height:110px;
      box-sizing: border-box;
      .left {
        display:flex;
        align-items: center;
        margin-top:-12px;
        .img {
          width:46px;
          height:46px;
          background:#e0f0ff;
          border-radius:100px;
          margin-right:6px;
        }
        .cont {
          text-align: center;
          .value {
            font-size:20px;
            font-weight:bold;
            color:#333;
            margin-bottom:10px;
          }
        }
      }
      .right {
        display:flex;
        align-items: center;
        justify-content: center;
        .item {
          width: 100%;
          text-align: center;
          border-left:1px solid #e2e2e2;
          padding:0 20px;
          .value {
            font-size:14px;
            margin-bottom:6px;
            font-weight: bold;
            position:relative;
            .v {
              font-size:12px;
              position:absolute;
              left:50%;
              top:50%;
              transform:translate(-50%,-50%);
              margin-top:-2px;
            }
          }
          .text {
            font-size:12px;
          }
          &:nth-child(1){
            border-left-color:transparent;
          }
        }
        .bgj{
          padding: 0 10px;
          min-width: 140px;
          max-width:200px;
          background: linear-gradient(
            90deg,
            rgba(85, 127, 205, 0.2),
            transparent
          );
          .item_one{
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            img{
              margin-right: 10px;
            }
            &:first-child{
              border-image: linear-gradient(90deg, rgba(85, 127, 205, 0.2) 20%, transparent) 1;
              border-bottom: 1px solid;
            }
            .value{
              color: #557fcd;
              font-size: 20px;
              span{
                font-weight: normal;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
}
.page-list {
  padding:20px 15px;
  display:flex;
  flex-wrap: wrap;
  height:240px;
  overflow-y:auto;
  box-sizing: border-box;
  .page-item {
    display:flex;
    align-items: center;
    margin-bottom:16px;
    justify-content: center;
    cursor: pointer;
    // flex:1;
    width:50%;
    overflow:hidden;
    box-sizing: border-box;
    // padding:0 10px;
    padding-right:20px;
    .img {
      width:48px;
      height:48px;
      background:#e2e2e2;
      border-radius:6px;
      margin-right:8px;
    }
    .cont {
      .text {
        color:#333;
        margin-bottom:6px;
      }
      .go {
        display:flex;
        align-items: center;
        font-size:12px;
        color:#999;
      }
    }
  }
}
</style>

